:root,
:host {
  --van-slider-active-background: var(--van-primary-color);
  --van-slider-inactive-background: var(--van-gray-3);
  --van-slider-disabled-opacity: var(--van-disabled-opacity);
  --van-slider-bar-height: 2px;
  --van-slider-button-width: 24px;
  --van-slider-button-height: 24px;
  --van-slider-button-radius: 50%;
  --van-slider-button-background: var(--van-white);
  --van-slider-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.van-theme-dark {
  --van-slider-inactive-background: var(--van-background-3);
}

.van-slider {
  position: relative;
  width: 100%;
  height: var(--van-slider-bar-height);
  background: var(--van-slider-inactive-background);
  border-radius: var(--van-radius-max);
  cursor: pointer;

  // use pseudo element to expand click area
  &::before {
    position: absolute;
    top: calc(var(--van-padding-xs) * -1);
    right: 0;
    bottom: calc(var(--van-padding-xs) * -1);
    left: 0;
    content: '';
  }

  &__bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--van-slider-active-background);
    border-radius: inherit;
    transition: all var(--van-duration-fast);
  }

  &__button {
    width: var(--van-slider-button-width);
    height: var(--van-slider-button-height);
    background: var(--van-slider-button-background);
    border-radius: var(--van-slider-button-radius);
    box-shadow: var(--van-slider-button-shadow);

    &-wrapper {
      position: absolute;
      cursor: grab;
      top: 50%;

      &--right {
        right: 0;
        transform: translate3d(50%, -50%, 0);
      }

      &--left {
        left: 0;
        transform: translate3d(-50%, -50%, 0);
      }
    }
  }

  &--disabled {
    cursor: not-allowed;
    opacity: var(--van-slider-disabled-opacity);

    .van-slider__button-wrapper {
      cursor: not-allowed;
    }
  }

  &--vertical {
    display: inline-block;
    width: var(--van-slider-bar-height);
    height: 100%;

    .van-slider__button-wrapper--right {
      top: auto;
      right: 50%;
      bottom: 0;
      transform: translate3d(50%, 50%, 0);
    }

    .van-slider__button-wrapper--left {
      top: 0;
      right: 50%;
      left: auto;
      transform: translate3d(50%, -50%, 0);
    }

    // use pseudo element to expand click area
    &::before {
      top: 0;
      right: calc(var(--van-padding-xs) * -1);
      bottom: 0;
      left: calc(var(--van-padding-xs) * -1);
    }
  }
}
